<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <title sec:authentication="name"></title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>
    <script th:src="@{js/jquery.slim.min.js}"></script>
    <script th:src="@{js/bootstrap.bundle.min.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style type="text/css">
    </style>
    <script>
        $(function () {
            var nua = navigator.userAgent
            var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
            if (isAndroid) {
                $('select.form-control').removeClass('form-control').css('width', '100%')
            }
        })
    </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">欢迎来到BOMC</a>

        <form class="d-flex" action="/logout" method="post">
            <button class="btn btn-outline-success" type="submit">登出</button>
        </form>
    </div>
</nav>
<!--sec:authorize="hasRole('ROLE_V3')" -->
<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a sec:authorize="hasRole('ROLE_V1')" class="nav-link active" id="v-pills-home-tab" data-toggle="pill"
                   href="#v-pills-home" role="tab"
                   aria-controls="v-pills-home" aria-selected="true">用 户</a>
                <a sec:authorize="hasRole('ROLE_V2')" class="nav-link" id="v-pills-profile-tab" data-toggle="pill"
                   href="#v-pills-profile" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false">维护人员</a>
                <a sec:authorize="hasRole('ROLE_V3')" class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
                   href="#v-pills-messages" role="tab"
                   aria-controls="v-pills-messages" aria-selected="false">管理员</a>
                <a sec:authorize="hasRole('ROLE_V3')" class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
                   href="#v-pills-settings" role="tab"
                   aria-controls="v-pills-settings" aria-selected="false">管理员</a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content" id="v-pills-tabContent">
                <div sec:authorize="hasRole('ROLE_V1')" class="tab-pane fade show active" id="v-pills-home"
                     role="tabpanel"
                     aria-labelledby="v-pills-home-tab">
                    用 户
                </div>
                <div sec:authorize="hasRole('ROLE_V2')" class="tab-pane fade" id="v-pills-profile" role="tabpanel"
                     aria-labelledby="v-pills-profile-tab">
                    维护人员
                </div>
                <div sec:authorize="hasRole('ROLE_V3')" class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                     aria-labelledby="v-pills-messages-tab">
                    管理员
                </div>
                <div sec:authorize="hasRole('ROLE_V3')" class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                     aria-labelledby="v-pills-settings-tab">
                    管理员
                </div>
            </div>

        </div>
    </div>
</div>
</div>
</div>
</body>
</html>
